<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title=""
      width="80%"
      @close="handleCancel"
    >
      <el-table
        class="myTable"
        v-loading="loading"
        :data="produceProductList"
        border
      >
        <el-table-column label="序号" width="60" type="index" align="center" />
        <el-table-column
          label="下单日期"
          min-width="100"
          align="center"
          prop="submitDate"
        >
          <template v-slot="{ row }">
            {{ row.submitDate?.split("T")[0] ?? "" }}
          </template>
        </el-table-column>
        <el-table-column
          label="订单数量"
          width="120"
          prop="produceCount"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="品种"
          prop="breedType"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="相关封面生产单"
          min-width="150"
          prop="produceNos"
          align="center"
        >
          <template #default="scope">
            <el-tag
              v-for="(tag, index) in scope.row.produceNos?.split(',')"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(scope.row, tag, index)"
            >
              {{ tag }}
            </el-tag>
            <div>
              <el-button
                class="button-new-tag"
                size="small"
                type="primary"
                circle
                @click="showCover(scope.row)"
              >
                +
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="系统外封面"
          width="140"
          prop="systemOutFm"
          align="center"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.systemOutFm"
              type="textarea"
              placeholder="请输入"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="装订方式"
          width="140"
          prop="bindingMode"
          align="center"
        >
          <template #default="scope">
            <dict-tag
              :options="ems_order_binding_mode"
              :value="scope.row.bindingMode"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="开本数"
          width="100"
          prop="bookSize"
          align="center"
        >
          <template #default="scope">
            <dict-tag
              :options="ems_produce_book_size"
              :value="scope.row.bookSize"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="组成"
          width="100"
          prop="composition"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="详细信息"
          min-width="200"
          prop="detail"
          align="center"
        >
          <template #default="scope">
            <el-form-item>
              <el-input
                disabled
                v-model="scope.row.detail"
                type="textarea"
                placeholder="请输入详细信息"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="贴数信息"
          width="160"
          prop="piece"
          align="center"
        >
        </el-table-column>
        <el-table-column label="印张" width="100" prop="sheet" align="center">
        </el-table-column>
        <el-table-column
          label="印色"
          min-width="100"
          prop="printColor"
          align="center"
        >
          <template #default="scope">
            <dict-tag
              :options="ems_order_print_color"
              :value="scope.row.printColor"
            />
          </template>
        </el-table-column>
        <el-table-column label="颜色" width="120" prop="color" align="center">
          <template #default="scope">
            <dict-tag :options="ems_produce_color" :value="scope.row.color" />
          </template>
        </el-table-column>
        <el-table-column
          label="用纸尺寸"
          prop="paperSize"
          min-width="135"
          align="center"
        >
          <template #default="scope">
            <dict-tag
              :options="ems_produce_paper_size"
              :value="scope.row.paperSize"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="成品尺寸(mm)"
          width="130"
          prop="finishSize"
          align="center"
        >
          <template #default="scope">
            <dict-tag
              :options="ems_produce_finish_size"
              :value="scope.row.finishSize"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="版材尺寸"
          min-width="125"
          prop="sheetSize"
          align="center"
        >
          <template #default="scope">
            <dict-tag
              :options="ems_machine_info_size"
              :value="scope.row.sheetSize"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="纸型"
          width="120"
          prop="paperType"
          align="center"
        >
          <template #default="scope">
            <dict-tag :options="mes_paper_type" :value="scope.row.paperType" />
          </template>
        </el-table-column>

        <el-table-column
          label="纸张编码"
          min-width="160"
          prop="paperNo"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="纸张名称"
          min-width="160"
          prop="paperName"
          align="center"
        />
        <el-table-column
          label="用版数量"
          width="100"
          prop="boardsCount"
          align="center"
        >
        </el-table-column>

        <el-table-column
          label="出版编码"
          width="120"
          prop="pubNo"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="清样编号"
          min-width="120"
          prop="sampleNo"
          align="center"
        >
        </el-table-column>

        <el-table-column label="烤版" width="100" prop="kaoban" align="center">
          <template #default="scope">
            {{ scope.row.kaoban == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          label="产品序列号"
          min-width="120"
          prop="productNo"
          align="center"
        ></el-table-column>
      </el-table>

      <div class="dialog-footer" v-if="produceProductList.length">
        <el-button
          type="primary"
          :loading="updateLoading"
          @click="submitUpdateCover"
          >确 定</el-button
        >
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
    <ContactCover
      :visible="isShowFM"
      @changeUpdate="handleContactFM"
      :bookCode="bookCode"
      @cancel="
        () => {
          isShowFM = false;
          bookCode = '';
        }
      "
    ></ContactCover>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const emit = defineEmits(["cancel", "updateList"]);
import { getProduceById, upProduceProduct } from "@/api/production/cover";
import ContactCover from "./contactCover.vue";
const {
  production_wages_ype,
  ems_produce_package_require,
  ems_machine_info_waste_rate,
  ems_produce_new_past,
  ems_order_binding_mode,
  ems_produce_finish_size,
  ems_produce_is_new,
  ems_produce_book_size,
  mes_paper_brand,
  mes_paper_package,
  ems_machine_info_size,
  mes_paper_material,
  mes_paper_specs,
  mes_paper_unit,
  ems_produce_color,
  mes_paper_type,
  ems_order_make_up,
  ems_order_breed_type,
  ems_order_print_color,
  ems_produce_paper_size,
  ems_order_pack_way,
  ems_workshop,
} = proxy.useDict(
  "ems_produce_package_require",
  "ems_machine_info_waste_rate",
  "ems_produce_new_past",
  "ems_produce_is_new",
  "ems_produce_finish_size",
  "mes_paper_package",
  "mes_paper_brand",
  "ems_produce_book_size",
  "ems_order_binding_mode",
  "mes_paper_unit",
  "mes_paper_specs",
  "mes_paper_material",
  "ems_machine_info_size",
  "ems_produce_color",
  "ems_produce_paper_size",
  "mes_paper_type",
  "ems_order_print_color",
  "ems_order_make_up",
  "ems_order_breed_type",
  "ems_order_pack_way",
  "ems_workshop",
  "production_wages_ype"
);
const route = useRoute();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: [String, Number],
    default: "",
  },
  printList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log(tab, event);
};
const listBPT = ref([]);
const loading = ref(true);
const dataList = ref([]);
const technologyList = ref([]);
const isShowFM = ref(false);
const updateLoading = ref(false);
const contactTextRow = ref({});
const bookCode = ref("");
const data = reactive({
  produceProductList: [], // 产品
  producePaperList: [], // 纸张
  producePrintList: [], // 印刷
  produceCoveringList: [], // 覆膜
  producePieceList: [],
  form: {},
});

const { form, produceProductList } = toRefs(data);

watch(
  () => props.id,
  async (val) => {
    if (val) {
      loading.value = true;
      getProduceById({ pid: val }).then((res) => {
        loading.value = false;
        res.data.produceProductList.forEach((item) => {
          item.submitDate = res.data.submitDate;
        });
        produceProductList.value = res.data.produceProductList;
      });
    }
  }
);

// 关联封面
const showCover = (row) => {
  bookCode.value = row.bookCode;
  contactTextRow.value = row;
  isShowFM.value = true;
};
// 选中的关联生产单
const handleContactFM = (row) => {
  // console.log(produceProductList.value);
  nextTick(() => {
    produceProductList.value.forEach((item) => {
      if (item.orderProductId == contactTextRow.value.orderProductId) {
        item.produceIds =
          [
            ...new Set([
              ...(item.produceIds?.split(",") ?? []),
              ...row.map((obj) => obj.productId),
            ]),
          ].join(",") || "";
        item.produceNos =
          [
            ...new Set([
              ...(item.produceNos?.split(",") ?? []),
              ...row.map((obj) => obj.produceNo),
            ]),
          ].join(",") || "";
      }
    });
  });
  isShowFM.value = false;
};
const handleClose = (row, tag, index) => {
  produceProductList.value.forEach((item) => {
    if (item.orderProductId === row.orderProductId) {
      const produceIdsArray = item.produceIds ? item.produceIds.split(",") : [];
      const produceNosArray = item.produceNos ? item.produceNos.split(",") : [];
      produceIdsArray.splice(index, 1);
      produceNosArray.splice(index, 1);
      item.produceIds =
        produceIdsArray.length > 0 ? produceIdsArray.join(",") : null;
      item.produceNos =
        produceNosArray.length > 0 ? produceNosArray.join(",") : null;
    }
  });
};

const submitUpdateCover = () => {
  proxy.$modal
    .confirm("是否确认修改")
    .then(function () {
      updateLoading.value = true;
      return upProduceProduct(produceProductList.value);
    })
    .then(() => {
      updateLoading.value = false;
      emit("cancel");
      emit("updateList");
      proxy.$modal.msgSuccess("修改成功");
    })
    .catch(() => {
      // paperBtnLoading.value = false;
    });
};
const handleCancel = () => {
  produceProductList.value = [];
  emit("cancel");
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
